<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片分类</title>

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./assets/bootstrap-validator/bootstrapValidator.min.css">
    <link rel="stylesheet" href="./assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css"/>

    <link rel="stylesheet/less" href="./assets/css/reset.less"/>
    <link rel="stylesheet/less" href="./assets/css/common.less"/>
    <link rel="stylesheet/less" href="./assets/css/ContactAdd.less"/>
</head>
<style>
    p {
        color: #fff;
    }
</style>
<body>
<!-- 信息录入 -->
<div class="info">
    <h3 class="title wow fadeInUp">新增卡片分类</h3>

    <p class="desc wow fadeInUp" data-wow-delay="200ms">
        新增卡片分类
    </p>
</div>

<form id="addType" class="contact wow fadeInUp" data-wow-delay="300ms">
    <div class="form-group">
        <label for="typename">分类名</label>
        <input type="text" class="form-control" id="typename" name="typename" placeholder="请输入分类名" required/>
    </div>

    <div class="action">
        <button class="btn">提交</button>
    </div>
</form>
</body>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/bootstrap-validator/bootstrapValidator.min.js"></script>
<script src="./assets/mui/js/mui.min.js"></script>
<script src="./assets/axios/axios.min.js"></script>
<script src="./assets/axios/request.js"></script>
<script src="./assets/js/cookie.js"></script>
<script src="./assets/js/login.js"></script>
<script>
    new WOW().init();

    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};
    // 表单验证
    $('#addType').bootstrapValidator({
        message: '表单内容不能为空',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        // 验证字段
        fields: {
            typename: {
                validators: {
                    notEmpty: {
                        message: '请输入卡片分类名'
                    },
                }
            }
        }
    }).on('success.form.bv', function (e) {
        e.preventDefault()
    });

    $("#addType").on('submit', async function () {
        if (!$("#addType").data('bootstrapValidator').isValid()) {
            $('#addType').data('bootstrapValidator').resetForm();
            return;
        }
        // 组装新增数据
        let data = {
            businessid: business.id ? business.id : 0,
            name: $.trim($('#typename').val())
        }

        let result = await POST({
            url: 'card/type/add',
            params: data
        });
        if (result.code === 1) {
            mui.toast(result.msg);
            setTimeout(() => {
                location.href = 'TypeIndex.html';
            }, 2000)
        } else {
            mui.toast(result.msg);
            $('#addType').data('bootstrapValidator').resetForm();
        }
    });
</script>
</html>
